<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/chat.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="chat-box">
        <div class="chat-box-div">
            <div class="chat-title">天天陪玩</div>
            <div class="chat-box1">
                <div class="chat-box1-left">
                    <!-- <div class="chat-box1-left-list">
                        <div class="chat-box1-left-list-img">
                            <img src="../image/tr/11.jpg" alt="">
                        </div>
                        <div class="chat-box1-left-list-name">
                            <div class="chat-box1-left-list-name1">
                                嘿嘿
                            </div>
                            <div class="chat-box1-left-list-id">
                                ID:123456
                            </div>
                        </div>
                        <div class="chat-box1-left-list-gl">
                            <div class="chat-box1-left-list-gl-close">x</div>
                            <div  class="chat-box1-left-list-gl-num">0</div>
                        </div>
                    </div>
                    <div class="chat-box1-left-list">
                            <div class="chat-box1-left-list-img">
                                <img src="../image/tr/11.jpg" alt="">
                            </div>
                            <div class="chat-box1-left-list-name">
                                <div class="chat-box1-left-list-name1">
                                    嘿嘿
                                </div>
                                <div class="chat-box1-left-list-id">
                                    ID:123456
                                </div>
                            </div>
                            <div class="chat-box1-left-list-gl">
                                <div class="chat-box1-left-list-gl-close">x</div>
                                <div  class="chat-box1-left-list-gl-num">0</div>
                            </div>
                        </div> -->
                </div>
                <div class="chat-box1-right">
                        <div class="chat-box1-right-list">
                                <!-- <div class="chat-box1-right-list1"> -->
                                    <!-- <div class="chat-box1-right-list1-left">
                                        <div class="chat-box1-right-list1-left-div">
                                            <img src="../image/tr/11.jpg" alt="">
                                        </div>
                                        <div class="chat-box1-right-list1-left-div1"></div>
                                    </div> -->
                                    <!-- <div class="chat-box1-right-list1-right">
                                        <div class="chat-box1-right-list1-right-div"></div>
                                        <div class="chat-box1-right-list1-right-div1">
                                            <img src="../image/tr/11.jpg" alt="">
                                        </div>
                                    </div> -->
                                <!-- </div> -->
                        </div>
                        <textarea name="" id="" cols="30" rows="10"></textarea>
                        <button id="btn">发送</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script>
<script>
    let socket=io.connect('http://localhost:5000');
    $(document).ready(function(){

        let data=JSON.parse(localStorage.getItem('id'));
        
        console.log(data[0].id)
        let id=data[0].id;
        function show(data){
            $('.chat-box1-left').append(`
            <div class="chat-box1-left-list" data-index="${data.ch_name}">
                        <div class="chat-box1-left-list-img">
                            <img src="${data.U_photo}" alt="">
                        </div>
                        <div class="chat-box1-left-list-name">
                            <div class="chat-box1-left-list-name1">
                                ${data.U_falsename}
                            </div>
                            <div class="chat-box1-left-list-id">ID:${data.pw_id}</div>
                        </div>
                        <div class="chat-box1-left-list-gl">
                            <div class="chat-box1-left-list-gl-close">x</div>
                            <div  class="chat-box1-left-list-gl-num">0</div>
                        </div>
                    </div>
            `)
        }
        $.ajax({
            url:'/chat',
            type:'get',
            data:{
                id:id,
            },
            success:function(res){
                res.error?console.log('数据库错误'): (function(){
                    $.each(res,function(i,v){
                        show(v)
                        let oLi=$('.chat-box1-left-list');
                        $.each(oLi,function(i,v){
                            $('.chat-box1-right-list').append(`
                            <div class="chat-box1-right-list1"></div>
                                `); 
                            })
                    })
                }())
            }
        })
        let id1;
        let oDiv;
        let a;
    $('.chat-box1-left').on('click','.chat-box1-left-list',function(){
        let oLi=$('.chat-box1-left-list');
        oDiv=$('.chat-box1-right-list1');
        id1=$(this).find($('.chat-box1-left-list-id')).html().split(':')[1]
       
        $.each(oLi,function(i,v){
            oLi.css({
                'background':''
            })
        })
        $(this).css({
            'background':'gold'
        });
        $.each(oDiv,function(i,v){
            oDiv.css({
                'display':'none'
            })
        })
        oDiv.eq($(this).index()).css({
            'display':'block'
        })
        a=$(this).index()
        return a,id1,oDiv;
    })
        let myMes='';
        $('#btn').click(function(){
        let mes=$('textarea').val()
        if(!mes)return;
        myMes=mes;
        oDiv.eq(a).append(`
                <div class="chat-box1-right-list1-right">
                    <div class="chat-box1-right-list1-right-div">${myMes}</div>
                    <div class="chat-box1-right-list1-right-div1">
                        <img src="../image/tr/11.jpg" alt="">
                    </div>
                </div>
                `)   
        socket.emit('sendMsg',
        {
            mes:myMes,
            myName:'@'+id,
            otherName:'@'+id1,
        });
        $('textarea').val('');
        })
        socket.on('@111111', function (data) {
            if(data.mes==myMes){
             oDiv.eq(a).append(`
                <div class="chat-box1-right-list1-right">
                    <div class="chat-box1-right-list1-right-div">${myMes}</div>
                    <div class="chat-box1-right-list1-right-div1">
                        <img src="../image/tr/11.jpg" alt="">
                    </div>
                </div>
                `)      
            }else{
                oDiv.eq(a).append(`
                <div class="chat-box1-right-list1-left">
                    <div class="chat-box1-right-list1-left-div">
                        <img src="../image/tr/11.jpg" alt="">
                    </div>
                    <div class="chat-box1-right-list1-left-div1">${data.mes}</div>
                </div>
                `)
            }
        console.log(data);
        });
               
})
   
    
</script>
</html>